<template>
  <!-- 上方三大卡片区域（保持不变） -->
  <a-layout-content class="a-layout-content-first">
    <div class="card-area">
      <div>
        <a-card hoverable style="width: 400px; margin-left: 30px">
          <template #cover>
            <img src="/src/static/icon1.png" class="icon"/>
          </template>
          <a-card-meta title="大数据可视化平台" @click="handleBigDataJump">
            <template #description>
              <img class="platform-image" src="/src/static/haoshi.jpg"/>
            </template>
          </a-card-meta>
        </a-card>
      </div>
      <div>
        <a-card hoverable style="width: 400px">
          <template #cover>
            <img src="/src/static/icon1.png" class="icon"/>
          </template>
          <a-card-meta title="MOM系统">
            <template #description>
              <img class="platform-image" src="/src/static/mom.png"/>
            </template>
          </a-card-meta>
        </a-card>
      </div>
      <div>
        <a-card hoverable style="width: 400px">
          <template #cover>
            <img src="/src/static/icon1.png" class="icon"/>
          </template>
          <a-card-meta title="车间数据采集 ">
            <template #description>
              <img class="platform-image" style="height: 160px" src="/src/static/map.png"/>
            </template>
          </a-card-meta>
        </a-card>
      </div>
    </div>
  </a-layout-content>

  <!-- 能力展示区域：支持动态切换子组件 -->
  <a-layout-content class="posibility-area" style="padding: 0 0px; margin-top: 25px">
    <a-card class="posibility-card">
      <div class="posibility-title">提供丰富的平台能力 ▎助力企业数字化转型</div>

      <!-- 图标导航栏 -->
      <div class="icon-row">
        <div
            v-for="item in tabs"
            :key="item.name"
            class="icon-container"
            :class="{ active: currentTab === item.name }"
            @click="currentTab = item.name"
        >
          <img class="icon" :src="item.icon" :alt="item.name"/>
          <div>{{ item.name }}</div>
        </div>
      </div>

      <!-- 动态内容区域：根据 currentTab 切换子组件 -->
      <div class="content-wrapper">
        <component :is="componentsMap[currentTab]"/>
      </div>
    </a-card>
  </a-layout-content>
</template>

<script setup>
import {ref} from 'vue'

import DeviceManagement from '/src/components/DeviceManagement.vue'
import WarehouseManagement from '/src/components/WarehouseManagement.vue'
import ProductionManagement from '/src/components/ProductionManagement.vue'
import PurchasingManagement from '/src/components/PurchasingManagement.vue'
import MaterialManagement from '/src/components/MaterialManagement.vue'
import gongYing from '@/static/gongying.png'
import shengChan from '@/static/shengchan.png'
import cangKu from '@/static/cangku.png'
import sheBei from '@/static/shebei.png'
import wuLiao from '@/static/wuliao.png'

// 定义 tab 列表（用于渲染图标导航）
const tabs = [
  {name: '设备管理', icon: sheBei},
  {name: '仓库管理', icon: cangKu},
  {name: '生产管理', icon: shengChan},
  {name: '采购管理', icon: gongYing},
  {name: '物料管理', icon: wuLiao}
]

// 默认选中第一个
const currentTab = ref('设备管理')

// 组件映射表：名称 → 组件
const componentsMap = {
  '设备管理': DeviceManagement,
  '仓库管理': WarehouseManagement,
  '生产管理': ProductionManagement,
  '采购管理': PurchasingManagement,
  '物料管理': MaterialManagement
}


// 跳转到豪士平台
// function handleBigDataJump(){
//     location.href='http://110.41.10.251/main';
// }
</script>

<style scoped>
.a-layout-content-first {
  background: white;
  height: 400px;
  margin-bottom: 20px;
}

.card-area {
  display: flex;
  justify-content: space-around;
  padding-top: 20px;
}

.icon {
  width: 50px;
  height: 50px;
  display: block;
  margin: 0 auto 10px;
}

.posibility-area {
  width: 100%;
}

.platform-image {
  width: 100%;
  height: auto;
}

.posibility-title {
  font-size: 22px;
  text-align: center;
  margin-bottom: 20px;
}

.posibility-card {
  min-height: 400px;
  padding: 20px;
}

.icon-row {
  display: flex;
  justify-content: space-around;
  margin-top: 16px;
  flex-wrap: wrap;
  gap: 20px;
}

.icon-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 10px;
  border-radius: 8px;
  transition: background 0.2s;
}

.icon-container:hover {
  background-color: #f0f9ff;
}

.icon-container.active {
  background-color: #e6f4ff;
  font-weight: bold;
  color: #1677ff;
}

.content-wrapper {
  margin-top: 24px;
  padding: 16px;
  background-color: #fafafa;
  border-radius: 8px;
  min-height: 150px;
}
</style>